<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        
        let user = {
            name:"张三",
            age:23,
            sex:0
        };

        let tempStr = '<ul class="box">' +
                        '<li>' + user.name + '</li>' +
                        '<li>' + user.age + '</li>' +
                        '<li>' + (user.sex==0?'男':'女') + '</li>' +
                      '</ul>';
        console.log(tempStr);
        
        // 模板字符串是JS后续添加字符串拼接操作的特殊规则
        //      模板字符串通过 反引号包裹 ``;
        //     1. 和 "" '' 进行隔离
        //     2. 允许换行
        //     3. 提供 ${} 描述语法，允许直接调用JS变量
        //     4. ${} 允许调用JS表达式操作（四则运算，逻辑运算，比较运算……）
        let tempStr1 = `
            <ul>
                <li>${ user.name }</li>
                <li>${ user.age }</li>
                <li>${ user.sex==0?"男":"女" }</li>
                <li>${ Math.random() }</li>
            </ul>
        `;
        
        console.log( typeof tempStr1 );
        console.log( tempStr1 );

        
        
    </script>
</head>
<body>
    
</body>
</html>